<template>
	<view class="navbar">
	    <view class="navbar-inner">
	      <view class="left">
			  <label class="cuIcon-back" @click="back"></label>
		  </view>
	      <view class="right">{{messageTip}}</view>
	    </view>
	  </view>
	<view class="cu-list menu sm-border margin-top">
			<ul>
			    <li v-for="item in belongList" :key="item.id" class="cu-item arrow">
			        <div class="level-container">
			            <div class="level-text"><strong>level{{ item.level }}</strong></div>
			        </div>
			        <div class="info-container">
			            <div class="province-city_and_date">{{ item.sheng }}-{{ item.shi }} {{ item.date }}</div>
			            <div class="address">{{ item.address }}</div>
			        </div>
			        <button class="cu-btn sm bg-blue round" @click="test(item)">检测</button>
			    </li>
			</ul>

		</view>
</template>

<script>
	export default {
		data() {
			return {
				belongList: [],
				messageTip:'反馈任务列表'
			}
		},
		methods: {
			back(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			},
			test(item){
					// console.log(item.userPhone)
					uni.setStorageSync('lmsg',item)
					// console.log(uni.getStorageSync('lmsg'));
					uni.setStorageSync('sphone',item.userPhone)
					uni.navigateTo({
						url:'/pages/finish/finish'
					})
				}
		},
		onLoad() {
			uni.request({
				url: 'http://localhost:8086/getList',
				method: 'GET',
				header: {
					'Content-Type': 'application/json' 
				},
				data: { code: uni.getStorageSync('id') },
				success: (res) => {
					console.log('查询成功');
					this.belongList = res.data;
					console.log(res.data)
				},
				fail: (err) => {
					console.error('请求失败', err);
				}
			});
		}
	}
</script>

<style>
	.navbar {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  background-color: #123456;
	  color: white;
	  padding: 10px;
	}
	.navbar-inner {
	  display: flex;
	  justify-content: space-between;
	  width: 100%;
	}
	.dropdown-content {
	  display: flex;
	  flex-direction: column;
	  position: absolute;
	  right: 10px;
	  top: 40px;
	  background-color: #f9f9f9;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}
	.dropdown-content view {
	  color: black;
	  padding: 12px 16px;
	  text-decoration: none;
	  display: block;
	}
	.dropdown-content view:hover {
	  background-color: #f1f1f1;
	}
	
	ul {
	    padding: 0;
	    margin: 0;
	    list-style: none; /* 去除默认的列表项符号 */
	}
	
	.cu-item {
	    display: flex;
	    align-items: center;
	    padding: 10px;
	    border-bottom: 1px solid #ccc; /* 为每个列表项添加分割线 */
	}
	
	.cu-item:last-child {
	    border-bottom: none; /* 确保列表的最后一个项没有分割线 */
	}
	
	.level-container {
	    flex: 0 0 auto; /* 确保level区块不伸缩，保持原始尺寸 */
	    margin-right: 20px; /* 右侧间隔 */
	}
	
	.info-container {
	    flex-grow: 1; /* 让信息区块填充剩余空间 */
	    display: flex;
	    flex-direction: column; /* 项目垂直排列 */
	}
	
	.province-city_and_date, .address {
	    padding: 2px 0; /* 给省市日期和地址添加适当的内边距 */
	}
	
	.button {
	    margin-left: auto; /* 将按钮推到右侧 */
	}
</style>
